blob: c56493ad78b4e358d8f612760b461bd62e1c89db (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useEffect, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
import Disclosure from "@/components/elements/Disclosure";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { CustomerSection } from "@/components/transactions/TransactionDetail";
import { SkeletonList } from "@/components/elements/Skeleton";
export default function DetailTransactions() {
const router = useRouter();
const { id } = router.query;
const [ auth ] = useAuth();
const [ transaction, setTransaction ] = useState(null);
const [ activeSection, setActiveSection ] = useState({
purchase: false,
shipping: false,
invoice: false,
});
const toggleSection = ( name ) => {
setActiveSection({
...activeSection,
[name]: !activeSection[name]
});
};
useEffect(() => {
if (auth) {
const loadTransaction = async () => {
const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
setTransaction(dataTransaction);
}
loadTransaction();
}
}, [ auth, id ]);
return (
<WithAuth>
<Layout className="pb-4">
<AppBar title="Detail Transaksi" />
{ transaction ? (
<>
<div className="p-4 flex flex-col gap-y-4">
<DescriptionRow label="Status Transaksi">
<span className="badge-green">Pending Quotation</span>
</DescriptionRow>
<DescriptionRow label="No Transaksi">
{ transaction?.name }
</DescriptionRow>
<DescriptionRow label="Purchase Order">
{ transaction?.po_name || '-' }
</DescriptionRow>
<DescriptionRow label="Ketentuan Pembayaran">
{ transaction?.payment_term }
</DescriptionRow>
<DescriptionRow label="Nama Sales">
{ transaction?.sales }
</DescriptionRow>
<DescriptionRow label="Waktu Transaksi">
{ transaction?.date_order }
</DescriptionRow>
</div>
<LineDivider />
<Disclosure
label="Detail Produk"
/>
<div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
{ transaction?.products?.map((product, index) => (
<VariantCard
key={index}
data={product}
/>
)) }
<div className="flex justify-between mt-3 font-medium">
<p>Total Belanja</p>
<p>{ currencyFormat(transaction?.amount_total || 0) }</p>
</div>
</div>
<LineDivider />
<Disclosure
label="Detail Pembeli"
active={activeSection.purchase}
onClick={() => toggleSection('purchase')}
/>
{ activeSection.purchase && (
<CustomerSection address={transaction?.address?.customer} />
) }
<LineDivider />
<Disclosure
label="Detail Pengiriman"
active={activeSection.shipping}
onClick={() => toggleSection('shipping')}
/>
{ activeSection.shipping && (
<CustomerSection address={transaction?.address?.shipping} />
) }
<LineDivider />
<Disclosure
label="Detail Penagihan"
active={activeSection.invoice}
onClick={() => toggleSection('invoice')}
/>
{ activeSection.invoice && (
<CustomerSection address={transaction?.address?.invoice} />
) }
</>
) : (
<div className="p-4">
<SkeletonList number={12} />
</div>
) }
</Layout>
</WithAuth>
);
}
|
